class PosterGenerator {
  constructor(setWidthDemo = 640, setHeightDemo = 1008) {
    this.setWidthDemo = setWidthDemo;
    this.setHeightDemo = setHeightDemo;
    this.styles = {
      style1: {
        canvas_box: {
          width: this.setWidthDemo,
          height: this.setHeightDemo,
          borderRadius: 0,
          backgroundColor: '#fff',
          padding: 0,
          position: 'relative',
          flexDirection: 'row',
          flexWrap: 'wrap'
        },
        imgPosBox: {
          position: 'relative',
          width: 245,
          height: 175,
          margin: 2.5,
        },
        imgBox: {
          width: 245,
          height: 175,
        },
        priceBox: {
          position: 'absolute',
          bottom: 0,
          right: 0,
          width: 245,
          height: 30,
          backgroundColor:'RGBA(241, 83, 83, 0.6)',
        },
        price: {
          fontSize: '28',
          color: 'yellow',
          textAlign: 'center',
          lineHeight:'1.2em'
        },
        lineBox: {
          position: 'absolute',
          bottom: 0,
          left: 0,
          height: 60,
          width: 750,
        },
        lineTxt: {
          textAlign: 'center',
          fontSize: '26',
          backgroundColor: 'yellow',
          width: 750,
          height: 60,
          lineHeight: '2.4em',
        }
      },
      style2: {
        canvas_box: {
          width: this.setWidthDemo,
          height: this.setHeightDemo,
          borderRadius: 0,
          backgroundColor: '#fff',
          padding: 0,
          position: 'relative',
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'space-between'
        },
        imgPosBox_one: {
          width: 490,
          height: 540,
          position: 'relative',
        },
        imgBox_one: {
          width: 490,
          height: 540
        },
        priceBox: {
          position: 'absolute',
          bottom: 0,
          right: 0,
          width: 490,
          height: 30,
          backgroundColor:'RGBA(241, 83, 83, 0.6)',
        },
        priceBox_two:{
          position: 'absolute',
          bottom: 0,
          right: 0,
          width: 250,
          height: 30,
          backgroundColor:'RGBA(241, 83, 83, 0.6)',
        },
        price: {
          fontSize: '28',
          color: 'yellow',
          textAlign: 'center',
          lineHeight:'1.2em'
        },
        lineBox: {
          position: 'absolute',
          bottom: 0,
          left: 0,
          height: 60,
          width: 750,
        },
        lineTxt: {
          textAlign: 'center',
          fontSize: '26',
          backgroundColor: 'yellow',
          width: 750,
          height: 60,
          lineHeight: '2.4em',
        },
        cloumBox: {
          width: 250,
          height: 540,
          flexDirection: 'column',
          justifyContent: 'space-between'
        },
        imgPosBox_two: {
          width: 250,
          height: 265,
          position: 'relative',
        },
        imgBox_two: {
          width: 250,
          height: 265,
        },
        imgPosBox_thr: {
          width: 250,
          height: 265,
          position: 'relative',
        },
        imgBox_thr: {
          width: 250,
          height: 265,
        },
      }
    };
  }

  updateStyles(width, height) {
    this.setWidthDemo = width || this.setWidthDemo;
    this.setHeightDemo = height || this.setHeightDemo;
    this.styles.style1.canvas_box.width = this.setWidthDemo;
    this.styles.style1.canvas_box.height = this.setHeightDemo;
    this.styles.style2.canvas_box.width = this.setWidthDemo;
    this.styles.style2.canvas_box.height = this.setHeightDemo;
  }

  generateWXML(shop) {
    let style = this.styles[`style${shop.style}`];
    let wxml;
    console.log(shop)
    if (shop.style == 2) {
      wxml =
        `<view class="canvas_box">
          <view class="imgPosBox_one">
            <image class='imgBox_one' src="${shop.poster_data[0].thumb}" />
            <view class="priceBox"><text class="price">${shop.poster_data[0].price}</text></view>
          </view>
          <view class="cloumBox">
            <view class="imgPosBox_two">
              <image class='imgBox_two' src="${shop.poster_data[1].thumb}" />
              <view class="priceBox_two"><text class="price">${shop.poster_data[1].price}</text></view>
            </view>
            <view class="imgPosBox_thr">
              <image class='imgBox_thr' src="${shop.poster_data[2].thumb}" />
              <view class="priceBox_two"><text class="price">${shop.poster_data[2].price}</text></view>
            </view>
          </view>
          <view class="lineBox"><text class="lineTxt">${shop.couponTxt}</text></view>
        </view>`;
    } else if (shop.style == 1) {
      let ImgView = '';
      shop.poster_data.forEach(item => {
        ImgView += `
          <view class="imgPosBox"><image class='imgBox' src="${item.thumb}" />
            <view class="priceBox"><text class="price">${item.price}</text></view>
          </view>`;
      });
      wxml =
        `<view class="canvas_box">
          ${ImgView}
          <view class="lineBox"><text class="lineTxt">${shop.couponTxt}</text></view>
        </view>`;
    }

    return {
      wxml,
      style
    };
  }
}
module.exports = PosterGenerator;
// // 使用示例
// const posterGen = new PosterGenerator();
// let { wxml, style } = posterGen.generateWXML(this.data.shopJson);
// posterGen.updateStyles(this.properties.setWidth, this.properties.setHeight);
// { wxml, style } = posterGen.generateWXML(this.data.shopJson);